<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background: #FFFFFF;
			}
			a , .mui-title{
				color:rgba(51,51,51,1);
			}
			.order_one{
				width: 100%;
				position: relative;
				float: left;
				background: #FFFFFF;
			}
			
			
			.myImg{
				width: 100%;
				height: 7.5px;
				position: relative;
				float: left;
				padding-top: 18.5px;
			}
			.myImg>img{
				width: 100%;
				height: 7.5px;
			}
			.order_two{
				width: 100%;
				position: relative;
				float: left;
			}
			.t_name{
				width: 100%;
				height: 72px;
				position:relative;
				float: left;
				padding: 15px;
				box-sizing: border-box;
				background: #FFFFFF;
				margin-top: 22px;
			}
			.t_name>img{
				width:42px;
				height:42px;
				border-radius:42px;
				position: relative;
				float: left;
			}
			.t_name>span{
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height: 38px;
				padding-left: 10px;
			}
			.t_commodity{
				width: 100%;
				position: relative;
				float: left;
				background:rgba(248,248,248,1);
			}
			.commodity_img{
				width: 40%;
				position: relative;
				float: left;
				padding-left: 15px;
				box-sizing: border-box;
			}
			.commodity_img>img{
				width: 90%;
				height: 111.5px;
			}
			.commodity_p{
				width: 57%;
				position: relative;
				float: left;
			}
			.commodity_p>p:nth-child(1){
				font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.commodity_p>p:nth-child(2){
				font-size:12px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				
			}
			.details_one{
				width: 40%;
				height: 23px;
				background:#FFFFFF;
				border-radius:3px;
				position: relative;
				float: left;
				line-height: 23px;
				text-align: center;
					white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.details_one>span{
				font-size:12px;
				font-family:PingFang-SC-Regular;
				font-weight:bold;
				color:rgba(102,102,102,1);
			}
			.details_one>img{
				width:9px;
				height:5px;
			}
			
			.details_two{
				width: 100%;
				position: relative;
				float: none;
			}
			.details_span{
				width: 30%;
				position: relative;
				float: left;
				margin-top: 15px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.details_span>span:nth-child(1){
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(254,31,31,1);
			}
			.details_span>span:nth-child(2){
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(254,31,31,1);
			}
			.mui-radio.mui-left input[type='radio'], .mui-checkbox.mui-left input[type='checkbox']{
				left: 10px;
			}
			.mui-radio.mui-left label, .mui-checkbox.mui-left label {
				padding-right: 15px;
				padding-left: 45px;
			}
			.details_inp{
				width: 82px;
				height:25px;
				position: relative;
				float: right;
				margin-top: 12px;
				border:1px solid rgba(196,196,196,1);
				border-radius:2px;
				margin-right: 15px;
			}
			.jian{
				width: 22px;
				height:23px;
				position: relative;
				float: left;
				border: none;
				border-right: 1px solid rgba(196,196,196,1);
				text-align: center;
				line-height: 23px;
				font-size: 20px;
			}
			.details_inp>input{
				width: 36px;
				height: 23px;
				position: relative;
				float: left;
				font-size: 12px;
				text-align: center;
				border: none;
			}
			 input[type='number']{
					 padding: 0px 0px;
			 }
			 input[type='button']{
				 font-size:20px;
				 line-height: 23px;
				 padding: 0px 2px;
			 }
			.jia{
				width: 22px;
				height:23px;
				position: relative;
				float: left;
				border: none;
				border-left: 1px solid rgba(196,196,196,1);
				text-align: center;
				line-height: 23px;
				font-size: 20px;
			}
			.t_number{
				width: 100%;
				position: relative;
				float: left;
			}
			.site_one{
				width: calc(96% - 15px);
				margin-left: 15px;
				position: relative;
				float: left;
				margin-top: 30px;
			}
			.site_two{
				width: 20%;
				position: relative;
				float: left;
			}
			.site_two>img{
				width: 35px;
				height: 35px;
				
			}
			.site_three{
				width: 70%;
				position: relative;
				float: left;
			}
			.site_three>span{
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:37px;
			}
			.site_four{
				width: 10%;
				position: relative;
				float: left;
				margin-top: 8px;
			}
			.site_four>img{
				width: 22px;
				height: 22px;
				float: right;
			} 
			
			.freight_one{
				width: calc(96% - 15px);
				margin-left: 15px;
				position: relative;
				float: left;
				border-bottom: 1px solid #d4d4d4;
				padding-top: 15px;
				padding-bottom: 15px;
				box-sizing: border-box;
			}
			.freight_two{
				width: 77%;
				position: relative;
				float: left;
			}
			.freight_two>span{
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:36px;
			}
			.freight_three{
				width: 23%;
				position: relative;
				float: left;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.freight_three>span{
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(254,31,31,1);
				line-height:36px;
			}
			.commodity_one{
				width: 100%;
				position: relative;
				float: right;
				border-bottom: 1px solid rgba(248,248,248,1);
				padding-top: 10px;
				padding-bottom: 10px;
				box-sizing: border-box;
			}
			.commodity_two{
				width: 65%;
				position: relative;
				float: left;
				text-align: center;
				padding-left: 142px;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.commodity_two>span{
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:36px;
			}
			.commodity_three{
				width: 30%;
				position: relative;
				float: left;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.commodity_three>span:nth-child(1){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:36px;
				float: left;
			}
			.commodity_three>span:nth-child(2){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:36px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow:ellipsis;
				float: left;
				width: 50%;
			}
			
			.pay_one{
				width: 100%;
				height: 49px;
				position: absolute;
				bottom: 0;
				border-top: 1px solid rgba(248,248,248,1);
			}
			.pay_two{
				width: 35%;
				position: relative;
				float: left;
				line-height: 49px;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.pay_two>span:nth-child(1){
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(51,51,51,1);
				float: left;
			}
			.pay_two>span:nth-child(2){
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(254,31,31,1);
				 white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				float: left;
				width: 50%;
			}
			.pay_btn{
				width: 30%;
				position: relative;
				float: right;
				
			}
			.pay_btn>button{
				width: 100%;
				height: 49px;
				position: relative;
				float: right;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(255,255,255,1);
			}
			.piece_one{
				width: 35%;
				position: relative;
				float: left;
				line-height: 49px;
				text-align: center;
				box-sizing: border-box;
				padding-left: 60px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.piece_one>span{
				font-size:16px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
			
			.sum{
				width: 100%;
				position: relative;
				float: left;
				border-bottom: 10px solid rgba(248,248,248,1);
			}
			.sum:last-child{
				border-bottom: 40px solid rgba(248,248,248,1);
			}
			.low{
				width: 100%;
				height: 49px;
				position: relative;
				float: left;
			}
			
			.person{
				width: calc(96% - 15px);
				margin-left: 15px;
				position: relative;
				float: left;
				padding-top: 18.5px;
				box-sizing: border-box;
			}
			.person>span:nth-child(1){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:37px;
				letter-spacing: 2px;
			}
			.person>span:nth-child(2){
				font-size:15px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:37px;
			}
			.person>span:nth-child(3){
				font-size:15px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:37px;
				padding-left: 8px;
				box-sizing: border-box;
			}
			.district{
				width: calc(96% - 15px);
				margin-left: 15px;
				position: relative;
				float: left;
			}
			.district_one{
				width: 21%;
				position: relative;
				float: left;
			}
			.district_one>span{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.district_two{
				width: 68%;
				position: relative;
				float: left;
			}
			.district_two>span{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.district_three{
				width: 10%;
				position: relative;
				float: left;
			}
			.district_three>img{
				width: 22px;
				height: 22px;
				float: left;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">确认订单</h1>
		</header>	
		<div class="mui-content">
			
			<div class="order_one" style="display: none;" id="wu">
				<div class="site_one">
					<div class="site_two">
						<img src="../image/zheng.png" alt="">
					</div>
					<div class="site_three">
						<span>新建收货地址</span>
					</div>
					<div class="site_four">
						<img src="../image/222.png" alt="">
					</div>
				</div>
				<div class="myImg">
					<img src="../image/ww.png" alt="">
				</div>
			</div>
			
			<div class="order_one" id="you">
				<div class="person">
					<span>收货人：</span>
					<span>张雪</span>
					<span>18945625546</span>
				</div>
				<div class=" district">
					<div class=" district_one">
						<span>收货地址：</span>
					</div>
					<div class=" district_two">
						<span>四川省</span>
						<span>成都市</span>
						<span>锦江区</span>
						<span>为名路为民小区3栋5单元6楼5号</span>
					</div>
					<div class=" district_three">
						<img src="../image/222.png" alt="">
					</div>
				</div>
				<div class="myImg">
					<img src="../image/ww.png" alt="">
				</div>
			</div>
			<div id="shenti">
				
			</div>
			<div class="low">
				<div class="pay_one">
					<div class="piece_one">
						<span>共</span>
						<span>1</span>
						<span>件</span>
					</div>
					<div class="pay_two">
						<span>合计:</span>
						<span class="heji">20000金币</span>
					</div>
					<div class="pay_btn">
						<button>去支付</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	    <script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			window.addEventListener('refresh', function(e){//执行刷新
			window.location.reload();
			});
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				var shangpingid = plus.webview.currentWebview().shangpingid;
				var addressid = '';
				// var addressid = localStorage.getItem('addressid');
				var newadd = localStorage.getItem('addressid');
				if(newadd){
					addressid = newadd;
					localStorage.setItem('addressid','');
				}
				var heji=0;
				// mui.alert(shangpingid.toString())
				// $.each(shangpingid,function(i,v){
				// 	mui.alert(v.id)
				// })
				// mui.alert(url);
				console.log(addressid);
				$.post(url+'/juyou/index/goumaiinfo',{token:user.token,shangpingid:shangpingid,addressid:addressid},function(res){
					if(res.code==200){
						var str = '';
						if(res.data.you==1){
							// mui.alert('haha')
							
											var address = res.data.address;
											addressid = address.id;
											var str='<div class="person">'+
									'<span>收货人：</span>'+
									'<span>'+address.name+'</span>'+
									'<span>'+address.phone+'</span>'+
								'</div>'+
								'<div class=" district">'+
									'<div class=" district_one">'+
										'<span>收货地址：</span>'+
									'</div>'+
									'<div class="district_two">'+
										'<span>'+address.shen+'</span>';
										if(address.shen!==address.shi){
											str+='<span>'+address.shi+'</span>';
										}
										str+='<span>'+address.xian+'</span>'+
										'<span>'+address.dir+'</span>'+
									'</div>'+
									'<div class=" district_three">'+
										'<img src="../image/222.png" alt="">'+
									'</div>'+
								'</div>'+
								'<div class="myImg">'+
									'<img src="../image/ww.png" alt="">'+
								'</div></div>'+
							'</div>';
								$("#you").empty();
								$("#you").append(str);
							$("#you").show();
							$("#wu").hide();
						}else{
							// mui.alert('hehe')
							$("#wu").show();
							$("#you").hide();
						}
						var shuju = res.data.shangping;
										
							str = '';
							var number = 0;
							var hejis = 0;
							var zong = 0;
							$.each(shuju,function(i,v){
								$.each(shangpingid,function(is,vs){
									if(vs.id==v.id){
										number = vs.number;
									}
								})
								str+='<div class="sum">'+
									'<div class="order_two">'+
										'<div class="t_name">'+
											'<img src="'+v.user.touxiang+'" alt="">'+
											'<span>'+v.user.name+'</span>'+
										'</div>'+
										'<div class="t_commodity">'+
											'<div class="commodity_img">'+
												'<img src="'+v.tupian+'" alt="">'+
											'</div>'+
											'<div class="commodity_p">'+
												'<p>'+v.name+'</p>'+
											'</div>'+
											'<div class="details_two">'+
												'<div class="details_span">'+
													'<span>金币</span>'+
													'<span class="danjia">'+v.icons+'</span>'+
												'</div>'+
												'<div class="details_inp">'+
													'<span class="jian">-</span>'+
													'<input type="number" data-id="'+v.id+'" name="" id="" value="'+number+'" class="in_valu"/>'+
													'<span class="jia">+</span>'+
												'</div>'+
											'</div>'+
										'</div>'+
									'</div>'+
								'</div>';
								hejis+=parseInt(number)*parseFloat(v.icons);
								zong += parseInt(number);
							})
							$("#shenti").append(str)
							// $('.heji').text(hejis);
							// $('.piece_one').children('span').eq(1).text(zong)
							jisuan()
							
							mui.init()
							
							//选择地址
							mui(document).on('tap','#you',function(){
								mui.openWindow({
									url:'../sub5/humyaddress.html',
									id:'../sub5/humyaddress.html',
									extras: {
										addressid:addressid,
									// shangpingid:id,
									// src:'../video/shiyong.mp4',
									},
									show: {
										autoShow: true, //页面loaded事件发生后自动显示，默认为true
										aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
										duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
									},
									waiting: {
										autoShow: true, //自动显示等待框，默认为true
										title: '正在加载...', //等待对话框上显示的提示内容
									}
								})
								
							})
							
							//计算合计
							function jisuan(){
								var danjia = $('.danjia');
								var number = 0;
								var hejis = 0;
								// var dan = 0;
								$.each(danjia,function(i,v){
									// dan = parseFloat($(v).text());
									number += parseInt($(v).parent().next().children('input').val());
									hejis +=parseFloat($(v).text())*parseInt($(v).parent().next().children('input').val());
								})
								$('.heji').text(hejis);
								$('.piece_one').children('span').eq(1).text(number)
							}
							
							
							
							//加减
								//点击加减
							//加
							$(".details_inp").on("tap",".jia",function(){
								var number = parseInt($(this).prev().val());
								number +=1;
								$(this).prev().val(number);
								setTimeout(function(){
									jisuan();
								},100)
								
							})
							
							
							
							
							
							//减
							$(".details_inp").on("tap",".jian",function(){
								var number = parseInt($(this).next().val());
								if(number>1){
									number = number-1;
									$(this).next().val(number);
								}
								setTimeout(function(){
									jisuan();
								},100)
							})
							
							
							//修改数量
							mui('.details_inp').on('input','.in_valu',function(){
								setTimeout(function(){
									jisuan();
								},100)
							})
						//添加地址
						mui(document).on('tap',"#wu",function(){
							mui.openWindow({
								url:'../sub5/huaddadress.html',
								id:'../sub5/huaddadress.html',
								show: {
									autoShow: true, //页面loaded事件发生后自动显示，默认为true
									aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
									duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							})
						})
						
						mui('.pay_btn').on('tap','button',function(){
							var suoyou = $('.in_valu');
							var shangping = [];
							$.each(suoyou,function(i,v){
								shangping.push({
									id:$(v).attr('data-id'),
									number:$(v).val()
								})
							})
							if(shangping.length==0){
								mui.toast('请选择商品!');
								return
							}
							// mui.alert(addressid);
							// return
							plus.nativeUI.showWaiting();
							$.post(url+'/juyou/shangping/addorder',{shangping:shangping,token:user.token,addressid:addressid},function(res){
								var self = plus.webview.getWebviewById("sub5.html");
								self.reload();
								// mui.alert('haha')
								plus.nativeUI.closeWaiting();
								if(res.code==205){
									mui.toast(res.msg);
									setTimeout(function(){
										mui.openWindow({
											url:'../sub5/huchongzhigold.html',
											id:'../sub5/huchongzhigold.html',
											show: {
												autoShow: true, //页面loaded事件发生后自动显示，默认为true
												aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
												duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
											},
											waiting: {
												autoShow: true, //自动显示等待框，默认为true
												title: '正在加载...', //等待对话框上显示的提示内容
											}
										})
									},1500)
								}else if(res.code==200){
									mui.toast(res.msg);
									setTimeout(function(){
										mui.openWindow({
											url:'../sub5/huorders.html',
											id:'../sub5/huorders.html',
											show: {
												autoShow: true, //页面loaded事件发生后自动显示，默认为true
												aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
												duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
											},
											waiting: {
												autoShow: true, //自动显示等待框，默认为true
												title: '正在加载...', //等待对话框上显示的提示内容
											}
										})
									},1500)
								}else{
									mui.toast(res.msg);
								}
							})
						})
						
					}else{
							mui.toast(res.msg);
						}
					
					
					
				})
				
				
				
			})
			
			
		</script>
</html>
